<template>
<a-popover v-model="visible" overlayClassName="popover_overlay" trigger="click" placement="bottomRight">
  <div class="popover_container" slot="content">
    <a-collapse accordion expand-icon-position="right">
      <a-collapse-panel v-for="item in output" :key="item.nodeId" :header="item.nodeName">
        <div class="popover_container_item" @click.stop="handleItemClick(item.nodeId, fieldItem)" v-for="fieldItem in item.outputs" :key="fieldItem.name">
          {{fieldItem.alia}}
        </div>
      </a-collapse-panel>
    </a-collapse>
  </div>
  <a-button icon="menu" />
</a-popover>
</template>

<script>
export default {
  props:{
    output: {
      default: []
    }
  },
  data(){
    return {
      visible: false
    }
  },
  methods:{
    handleItemClick( parentNodeId, item){
      this.visible = false
      this.$emit('change', {...item, parentNodeId})
    }
  }
}
</script>

<style lang="less">
  

.popover_overlay{
  .ant-popover-inner-content{
    padding: 0
  }
}
.popover_container{
  width: 450px;
  height: 200px;
  overflow-y: auto;

  .ant-collapse-content > .ant-collapse-content-box{
    padding: 0
  }
  .popover_container_item{
    height: 35px;
    line-height: 35px;
    padding: 0 10px;
    cursor: pointer;
  }
  .popover_container_item:hover{
    background-color: rgba(72, 161, 255, 0.8);
    color: white;
  }
}
</style>